<template>
	<view :style="{'backgroundColor': scrollTop <= 0 ? '#4cd964':'#f8f8f8'}" class="header">
		<view :style="{paddingTop:`${statusBarHeight}px`,paddingBottom:`${menuBtn.top - statusBarHeight}px` }"
			class="navigation">
			<view :style="{margin: `${menuBtn.top - statusBarHeight}px 0`, height: `${menuBtn.height}px`}"
				style="display: flex;align-items: center;">
				<uv-icon name="map" size="19"></uv-icon>
				<text>天景山庄</text>
				<uv-icon name="arrow-right" size="19"></uv-icon>
			</view>
			<view class="search-box">
				<view class="search-bar">水果年货节抢鲜上市</view>
				<view class="search-btn">搜索</view>
			</view>
		</view>
		<view :style="{paddingTop: `${navigationBarHeight}px`}">
			<view style="display: flex;justify-content: space-between;padding-bottom: 10rpx;">
				<view style="display: flex;align-items: center;">
					<uv-icon name="self-support" custom-prefix="custom-icon" size="20"></uv-icon>
					<text style="font-size: 26rpx;">美团自营超市</text>
				</view>
				<view style="display: flex;align-items: center;">
					<uv-icon name="self-support" custom-prefix="custom-icon" size="20"></uv-icon>
					<text style="font-size: 26rpx;">最快30分钟送达</text>
				</view>
				<view style="display: flex;align-items: center;">
					<uv-icon name="self-support" custom-prefix="custom-icon" size="20"></uv-icon>
					<text style="font-size: 26rpx;">营业至凌晨2:00</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';

	defineProps({
		scrollTop: {
			type: Number,
			default: 0
		}
	})

	const navigationBarHeight = ref(0)
	const statusBarHeight = ref(0)
	const menuBtn = uni.getMenuButtonBoundingClientRect()
	const searchBarHeight = 66 // 搜索框内容高度

	uni.getSystemInfo({
		success: (info) => {
			statusBarHeight.value = info.statusBarHeight
			const mt = menuBtn.top - statusBarHeight.value
			navigationBarHeight.value = statusBarHeight.value + menuBtn.height + mt * 3 + uni.upx2px(
				searchBarHeight)
		}
	})
</script>

<style lang="scss" scoped>
	.header {
		padding: 0 24rpx;
		transition: background-color .3s ease;

		.navigation {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			padding-left: 30rpx;
			padding-right: 30rpx;
			background-color: inherit;
			z-index: 2;
		}

		.search-box {
			background-color: $uni-bg-color;
			border-radius: 40rpx;
			position: relative;
			height: 66rpx;
			display: flex;
			align-items: center;
			padding-left: 30rpx;

			.search-bar {
				color: $uni-text-color;
				font-size: 30rpx;
			}

			.search-btn {
				position: absolute;
				background-color: red;
				color: #fff;
				right: 10rpx;
				top: 50%;
				transform: translateY(-50%);
				padding: 6rpx 24rpx;
				border-radius: 40rpx;
			}
		}
	}
</style>